<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Networx</title>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript">
	/* $(document).ready(function() {
		var link = $('ul li a'); // $('ul li a')  -- kada dodas slicice.
		link.click(function() {
			var pageLink = $(this).attr('href');
			$('div.placeholder').load(pageLink);

			return false;
		});
	}); */
</script>
<style>
.colone-left ul {
	list-style: none;
}

.colone-left ul a {
	text-decoration: none;
}
body {
	background-color: #AAAAAA;
}

a.ViewPersonalInformation {
	text-decoration: none;
	display: block;
	height: 45px;
	width: 196px;
	background: url("view personal info crno.png") no-repeat;
}

a.ViewPersonalInformation:HOVER,a.ViewPersonalInformation:ACTIVE {
	background: url("view personal info belo.png") no-repeat;
}

a.addFriend {
	text-decoration: none;
	display: block;
	height: 45px;
	width: 196px;
	background: url("add friend crno.png") no-repeat;
}

a.addFriend:HOVER,a.addFriend:ACTIVE {
	background: url("add friend belo.png") no-repeat;
}

.mid {
	background-image: url('1.png');
	background-repeat: repeat-x;
	height: 800px;
	width: 70%;
}

.container {
	position: relative;
}

.wrapper {
	width: 860px;
	margin: 0 auto;
}

.colone-left {
	float: left;
	width: 370px;
	margin: 0 20px 0 0;
}

.colone-right {
	float: right;
	width: 470px;
	margin: 0 0 0 0;
}

a {
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: #000;
}

h1 {
	font-size: 30px;
	color: white;
}
</style>
</head>
<body>

	<map name="links">
		<area shape="rect" alt="" coords="14, 0, 260, 50"
			href="ViewPersonsFriendsLoggedUserServlet">
		<area shape="rect" alt="" coords="270, 0, 526, 50"
			href="RegistredUserHomeServlet">
		<area shape="rect" alt="" coords="536, 0, 780, 50" href="ViewWall.jsp">
	</map>

	<div align="center">
		<div class="mid">
			<div class="container">
				<div class="wrapper">
					<div class="header" align="center">
						<img alt="click here to navigate" src="Header.png" usemap="#links">
					</div>
					<div class="header" align="right">
						<a href="LogoutServlet" style="color: white;">Logout</a>
					</div>
					<div class="colone-right">
					<h3 align="center">&nbsp; &nbsp;Person's Friends:</h3>
				        <c:choose>
				    		<c:when test='${searchStatus == "PERSON_HAVE_FRIENDS"}'>
				    			<table width="95%" border="0" align="center" class="search"> 
				        			<c:forEach items="${personsFriends}" var="temp">
										<tr>
											<c:choose>
						    					<c:when test='${temp.picture == null}'>
						    						<td width="5%" class="first">
														&nbsp; &nbsp;<a href="GoToSelectedPersonProfileServlet?personID=${temp.id}" target="_blank">
															<img width="50" height="50" src="anonimus.jpg"></a>
													</td>
						    					</c:when>
						    					<c:when test='${temp.picture != null}'>
						    						<td width="5%" class="first">
														&nbsp; &nbsp;<a href="GoToSelectedPersonProfileServlet?personID=${temp.id}" target="_blank">
															<img width="50" height="50" src="/images/networx/profile/thumbnails/${temp.picture}"></a>
													</td>	 
						    					</c:when>
						    					<c:otherwise>
						    					</c:otherwise>
			    							</c:choose> 				
											<td width="60%" class="second"><h3><a href="GoToSelectedPersonProfileServlet?personID=${temp.id}" 
												target="_blank">${temp.firstName}  ${temp.lastName}</a></h3>
											</td>
											<td><a href="DeleteFriendLoggedUserServlet?personID=${temp.id}" 
												onclick="friendDeletedMessage()">Delete</a></td>					
										</tr>
									</c:forEach>	
								</table>
				    		</c:when>
				    		<c:when test='${searchStatus == "PERSON_DO_NOT_HAVE_FRIENDS"}'>
				    			<b style="color: red"><br>&nbsp; &nbsp;You Don't Have Friends.</b>
				    		</c:when>
			    	 </c:choose>
					</div>
					<div class="colone-left">
					
						<p style="color: white;">${logovaniUser.firstName} is viewing his m8s</p>
						<form action="GuestSearchServlet" method="post" name="SearchForm"
							onsubmit="return checkSearchParametersFromGuestWelcomeHomePage()">
							<ul style="display: block; float: left;">
								<li><a class="ViewPersonalInformation"
									href="ViewPersonalInformation.jsp"> &nbsp; </a>
								</li>
								<li><a class="addFriend" href="SearchForDude.jsp">&nbsp;</a>
								</li>
							</ul>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
